<template>
  <div style="padding: 20px">
    <el-form :model="queryForm" ref="queryForm" size="mini" :rules="queryFormRules" inline>
      <el-form-item label="行业：" prop="industry_id">
        <el-select v-model="queryForm.industry_id" placeholder="请选择客户行业">
          <el-option
            v-for="item in industry_dict"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="resetForm('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" size="mini" stripe border>
      <el-table-column label="媒体名称" prop="media_spec_name" width="200" show-overflow-tooltip align="center"
      ></el-table-column>
      <el-table-column label="刊例价" min-width="200" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row!==undefined && scope.row.price_day !== null" size="mini">
              {{ scope.row.price_day ? scope.row.price_day + '/元/天' : '暂未填写/元/天' }}
            </el-tag>
          </div>
          <div>
            <el-tag v-if="scope.row!==undefined && scope.row.price_week !== null" size="mini"
            >
              {{
                scope.row.price_week ? scope.row.price_week + '/元/周' : '暂未填写/元/周'
              }}
            </el-tag>
          </div>
          <div>
            <el-tag v-if="scope.row!==undefined && scope.row.price_month !== null" size="mini"
            >
              {{
                scope.row.price_month ? scope.row.price_month + '/元/月' : '暂未填写/元/月'
              }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="红线价" prop="media_spec_name" min-width="200" show-overflow-tooltip align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.red_line_price?'danger':'info'" size="mini">
            {{ scope.row.red_line_price ? scope.row.red_line_price + '元/月' : '暂未填写' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="折扣" prop="discount" width="120" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          {{ scope.row.discount ? scope.row.discount + '%' : '暂未填写折扣' }}
        </template>
      </el-table-column>
      <el-table-column label="日价格(折扣后)" prop="media_spec_name" min-width="200" show-overflow-tooltip align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row!==undefined && scope.row.discount&& scope.row.price_day !== null"
            size="mini" :type="scope.row.price_day?'success':'info'"
          >
            折扣价：{{
              scope.row.price_day ? getPriceAfterDiscount(scope.row.discount, scope.row.price_day) + '元/天' : '暂未填写/元/天'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="周价格(折扣后)" min-width="200" align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row!==undefined && scope.row.discount&& scope.row.price_week !== null"
            size="mini" :type="scope.row.price_week?'success':'info'"
          >
            折扣价：{{
              scope.row.price_week ? getPriceAfterDiscount(scope.row.discount, scope.row.price_week) + '元/周' : '暂未填写/元/周'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="月价格(折扣后)" min-width="200" align="center"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row!==undefined && scope.row.discount&& scope.row.price_month !== null"
            size="mini" :type="scope.row.price_month?'success':'info'"
          >
            折扣价：{{
              scope.row.price_month ? getPriceAfterDiscount(scope.row.discount, scope.row.price_month) + '元/月' : '暂未填写/元/月'
            }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import { query } from '@/api/offer/offer'
import { multiply } from '@/utils/amount'

export default {
  data() {
    return {
      queryForm: {
        industry_id: null
      },
      queryFormRules: {
        industry_id: [
          {
            required: true,
            message: '请选择行业',
            trigger: 'change'
          }
        ]
      },
      // 行业字典
      industry_dict: [],
      tableData: [],
      tableLoading: false
    }
  },
  created() {
    this.initIndustryDict()
  },
  methods: {
    // 初始化行业字典
    initIndustryDict() {
      list_all3rd_bycode({ code: 'khxg-hy' }).then(
        res => {
          this.industry_dict = res.data.map(item => (
            {
              id: item.id,
              name: item.name
            }
          ))
        }
      )
    },
    search() {
      this.$refs.queryForm.validate(flag => {
        if (flag) {
          this.tableLoading = true
          query(this.queryForm).then(res => {
            this.tableLoading = false
            this.tableData = res.data
          })
        }
      })
    },
    resetForm() {
      this.$refs.queryForm.resetFields()
      this.tableData = []
    },
    /**
     * 获取折扣后价格
     */
    getPriceAfterDiscount(discount, price) {
      if (discount == null || discount == '' || price == null || price == '') {
        return ''
      }
      let s = '0.' + discount
      return multiply(s, price)
    }
  }
}
</script>

<style>
</style>
